<template>
    <div class="sys-page">
        <app-title :title="dialogTitle"  style="display:inline;"></app-title>
<el-button type="success" @click="refresh()" round style="float:right; margin-top:10px;" icon="el-icon-refresh">刷新</el-button>
            <el-table v-loading="loading" border :data="tableData" :row-class-name="tableRowClassName">
                <el-table-column prop="userName" label="账号" align="center"></el-table-column>
                <el-table-column prop="ipEffective" label="关联终端IP" align="center"></el-table-column>
                <el-table-column label="操作" align="center">

                    <template slot-scope="scope">
                        <el-button type="text" size="medium" @click="edit(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog :title="dialogTitle" :visible.sync="editTableShow" width='40%' :fullscreen='false'>

                <el-form  :rules="validateRules">
                    <el-row>
                        <el-col :span="12">
                    <el-form-item prop="selectUserName" label="用户名:" :label-width="formLabelWidth">
                        <el-input v-model="selectUserName" :readonly="true" :disabled="true" ref="selectUserName" size="small"></el-input>
                    </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                    <el-form-item prop="selectValue" label="终端IP:" :label-width="formLabelWidth">
                        <el-input v-model="selectValue" ref="selectValue" @focus="ipfocus" size="small"></el-input>
                    </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-button @click.native.prevent="ok" :disabled="okEnable">确定</el-button>
                <el-button @click.native.prevent="cancel">取消</el-button>

            </el-dialog>
    </div>

</template>
<style>
  .el-table .warning-row {
    background: #F08080;
  }

  .el-table .success-row {
    background:#f0f9eb;
  }
</style>
<script>
export default {
    name:'userterminalband',
    data(){
        var validateIp = (rule, value, callback) => {

            this.HTTP.methods.apiGet("/ajax/ip/check.shtml?ip="+this.selectValue).then(res =>
            {
                if(res.code != 200){
                    this.okEnable = true;
                callback(new Error(res.msg))
            }else{
                    this.okEnable = false;
                callback()
            }
        })

        }
        return {

            validateRules:{
                selectValue:[{ validator: validateIp,  trigger: 'blur', required: true, message:"IP输入非法"}]
            },
            dialogTitle:"用户终端IP绑定管理",
            failcnt:1,
            lastIp: "",
            lastRow: {},
            loading: false,
            editTableShow: false,
            selectUserName:"",
            formLabelWidth: "100px",
            okEnable: true,
            tableData:[

            ],
            errorMsg:"您的信息有误，请联系管理员修改",
            issafe:true

       }
    },
    mounted(){
        this.query()
    },
    methods:{
        refresh(){
            this.query()
        },
        ipfocus:function () {
          this.okEnable = true;
        },
        tableRowClassName({row, rowIndex}) {
          if(this.issafe === false){
            return 'warning-row';
          }else{
              return 'success-row'
          }
        },
        edit(row){
            this.lastRow = row;
            this.selectUserName = row.userName;
            this.selectValue = row.ipEffective
           this.editTableShow = true
        },
        ok(){
            this.editTableShow = false
            this.lastIp = this.selectVal

            this.HTTP.methods.apiPost("/user/userterminalcfg.shtml",{userName:this.selectUserName,
                ipEffective:this.selectValue }).then(res =>
                {
                   if (res.code != 200) {
                        this.$message(res.msg);
                    } else {
                        for(var i=0; i<this.tableData.length; i++) {
                            if (this.tableData[i].userName == this.selectUserName) {
                                this.tableData[i].ipEffective = res.ip;
                                console.log(res.ip)
                            }
                        }
                        this.$message("IP绑定成功");
                    }

                })
        },
        cancel(){
            this.editTableShow = false
            this.failcnt = 1
            this.selectVal = 1

        },
        //缺少一种点进去链接，就发请求的listener
        query(){
            this.HTTP.methods.apiGet("/user/findall?pageNum=1&pageSize=100").then(res =>
            {
                if(res.code == 200){
                this.tableData = res.data.list;

            }else{
                this.tableData.body = []
            }
        })
        }
    }
}
</script>


